{% extends 'base.html' %}

{% block head %}
{{ super() }}
<style type="text/css">
    a:hover{color:#0099CC}
    
    /*.row:hover{border-style: None solid;
        border-color:#666666;
        border-width:1px;
    }*/
    #menu {/* https://www.w3.org/Style/Examples/007/menus.zh_CN.html#L384 */
        position: fixed;
        right: 0;
        top: 50%;
        width: 8em;
        margin-top: -2.5em;
      }

</style>
{% endblock %}



{% block container %}
{{ super() }}
<div class="page-header">
    <div class="row">
        <div class="col-xs-12 col-sm-12">
            <h1>Data Science Challenge / Competition
                <iframe src="https://ghbtns.com/github-btn.html?user=iphysresearch&repo=DataSciComp&type=star&count=true" scrolling="0" width="170px" height="20px" frameborder="0"></iframe>
            </h1>
        </div>
        <div class="meta col-xs-12">
            <li>Countdowns to <b>ENTRY DEADLINE</b> of popular Data Science Challenges/Competitions.</li>
            <!-- <br> -->
            <li>To add/update a challenge or any other advices to me, plesase don't hesitate and send in a
                <a target="_blank" href="https://github.com/iphysresearch/DataSciComp" style="background-color:#CCFF66">pull request</a>.
            </li>
            <!-- <br> -->
            <li>
                <a href="/DataSciComp/hostby.html" style="background-color:#CCFF66">Here</a> offer a list of links to various sources in which you may have an interest. 
            </li>
            <li>Subscribe to our mailing list for news and updates!  <a href="https://iphysresearch.github.io/DataSciComp/update_log.xml"><img src="http://www.runoob.com/images/rss.gif" width="36" height="14"></a></li>
        </div>
<!-- Begin Mailchimp Signup Form -->

<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width: 500px; }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup" class="meta col-xs-12">
<form action="https://github.us20.list-manage.com/subscribe/post?u=9fc96c0c089d4508de8f618a5&amp;id=fc48c9457c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <!-- <label for="mce-EMAIL">Subscribe to our mailing list</label> -->
    <!-- <li>Subscribe to our mailing list</li> -->
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9fc96c0c089d4508de8f618a5_fc48c9457c" tabindex="-1" value=""></div>
    <div class="clear">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->
    </div>

    <br>

    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal">
                <div class="form-group">
                    {% for id_checkbox in id_type_checkboxs %}
                    <div class="col-md-4 col-xs-5">
                        <div class="checkbox">
                            <label><input id="{{ id_checkbox.id }}" class="" type="checkbox"></input>
                                {{ id_checkbox.name }}
                            </label>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </form>
            <hr>
            <form class="form-horizontal">
                <div class="form-group">
                    {% for id_checkbox in id_type2_checkboxs %}
                    <div class="col-md-4 col-xs-5">
                        <div class="checkbox">
                            <label><input id="{{ id_checkbox.id }}" class="" type="checkbox"></input>
                                {{ id_checkbox.name }}
                            </label>
                        </div>
                    </div>
                    {% endfor %}
                    <div class="col-md-4 col-xs-5">
                            <div class="checkbox">
                                <label style="color:#FF0033"><input id="rewarded-checkbox" class="" type="checkbox"></input>
                                    Rewards filter
                                </label>
                            </div>
                        </div>
                </div>
            </form>            
        </div>
    </div>
    <div class="row">
        <div class="meta col-xs-12">
            <!-- Export all deadlines to
            <a href="https://calendar.google.com/calendar/r?cid=http://aideadlin.es/ai-deadlines.ics">Google Calendar</a>
             . -->
             <p id="system-time"></p>
        </div>
    </div>
</div>

{% for Comp in competitions %}
<div id="{{ Comp.id }}" class="{{ '-comp '.join(Comp.type1) }}-comp {{ '-comp '.join(Comp.type2) }}-comp {{ '-comp '.join(Comp.howprize) }}-comp">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <a href="{{ Comp.url }}" name="{{ Comp.id }}"><b>{{ Comp.title }}</b></a>
            <div class="meta">{{ Comp.range }}
                 // Host by
                 {% for host in Comp.hostby %}
                 {% if loop.index > 1 %}
                 &
                 {% endif %}
                 {% for item in host.items() %}
                 <a href="{{ item[1] }}" style="background-color:#CCFF66">{{ item[0] }}</a>
                 {% endfor %}
                 {% endfor %}
                 // Prize: {{ Comp.prize }}</div>
            {% if Comp.note %}
            <div class="note"><b>Note</b>: {{ Comp.note | safe }} 
            <!-- More info <a href="http://baidu.com">here</a> -->
            </div>
            {% endif %}
        </div>
        <div class="col-xs-12 col-sm-6">
            {% if Comp.deadtime != 'No deadline' %}
            <span class="timer"></span>
            <div class="deadline">
                <div>Entry Deadline: <span class="deadline-time"></span></div>
            </div>
            <div class="calendar"></div>
            {% else %}
            <div>No Deadline.</div>
            {% endif %}                      
        </div>
    </div>
    <hr>
</div>
{% endfor %}
<footer>
    <!-- https://clustrmaps.com/ -->
    <script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?cl=080808&w=557&t=tt&d=mmxT7aC-Q0y6XjIG4NnfnrS0FBgO6N7mGMI7h0MB_OM&co=ffffff&ct=808080&cmo=3acc3a&cmn=ff5353'></script>
    <a href="/">DataSciComp</a>
    is maintained by
    <a href="https://github.com/iphysresearch">@Herb</a>
    .
</footer>
<hr>
{% endblock %}



{% block script_js %}
{{ super() }}
<script type="text/javascript" charset="utf-8">
    $(function() {
        // https://github.com/carlsednaoui/add-to-calendar-buttons
        {% for Comp in competitions %}
            {% if Comp.deadtime != 'No deadline' %}
          // adjust date according to deadline timezone
        //   var timezone = "Etc/GMT-8" ;
        //   var timezone = "Asia/Shanghai" ;
          var timezone = "{{ Comp.timezone }}" ;
          var compDate = moment.tz("{{ Comp.deadtime }}", timezone);

          // render countdown timer
          $('#{{ Comp.id }} .timer').countdown(compDate.toDate(), function(event) {
            $(this).html(event.strftime('%D days %Hh %Mm %Ss'));
          });
          $('#{{ Comp.id }} .deadline-time').html(compDate.toString());

          // add calendar button
          var myCalendar = createCalendar({
            options: {
              class: 'calendar-obj',

              // You can pass an ID. If you don't, one will be generated for you
              id: '{{ Comp.id }}'
            },
            data: {
              // Event title
              title: '[Entry Deadline] {{ Comp.title }}',

              // Event start date
              start: compDate.toDate(), 
              end: compDate.toDate(), 
                // You can also choose to set an end time
                // If an end time is set, this will take precedence over duration
                // end: new Date('June 15, 2013 23:00'),                   

              // Event duration (IN MINUTES)
              duration: 60,

                // Event Description
                description: '{{ Comp.note }}'
            }
          });
          document.querySelector('#{{ Comp.id }} .calendar').appendChild(myCalendar);

          // check if date has passed, add 'past' class to it
          var today = moment();
          if (today.diff(compDate) > 0)
            $('#{{ Comp.id }}').addClass('past');
            {% endif %}
        {% endfor %}
        

        // Set checkboxes
        var comp_type_data = [{"name":"Platform","sub":"PF"},{"name":"Academia","sub":"AC"},{"name":"Data Mining","sub":"DM"},{"name":"Computer Vision","sub":"CV"},{"name":"Natural Language Processing","sub":"NLP"},{"name":"Reinforcement Learning/Robotics","sub":"RL"},{"name":"Speech/Signal Proccessing","sub":"SP"}];
        var all_subs = [];
        var type1_subs = [];
        var type2_subs = [];
        for (var i = 0; i < comp_type_data.length; i++) {
          all_subs[i] = comp_type_data[i]['sub'];
          if (i <= 1) {
            type1_subs[i] = comp_type_data[i]['sub'];
          }
          else {
            type2_subs[i] = comp_type_data[i]['sub'];
          }
        }


        // Get subjects from URL
        var url = new URL(window.location);
        var subs = url.searchParams.get('sub');
        if (subs == undefined) {
           subs = store.get('/');
           console.log(subs);
        } else {
           subs = subs.toUpperCase().split(',');
        }
        // Get subjects from browser cache

        if (subs === undefined) {
          subs = all_subs;
          for (var i = 0; i < subs.length; i++) {
            $('#' + subs[i] + '-checkbox').prop('checked', true);
          }
        } else {
          for (var i = 0; i < subs.length; i++) {
            $('#' + subs[i] + '-checkbox').prop('checked', true);
          }
        }
        // Hide unchecked subs
        for (var i = 0; i < all_subs.length; i++) {
          if (subs.indexOf(all_subs[i]) < 0) {
            $('.' + all_subs[i] + '-comp').hide();
          }
        }
        store.set('/', subs);
        window.history.pushState('', '', '/DataSciComp?sub=' + subs.join());

        // Event handler on checkbox change
        $('form :checkbox').change(function(e) {

          var checked = $(this).is(':checked');
          var cid = $(this).prop('id');
          var csub = cid.substring(0, cid.length - 9);
          if (checked == true) {
            // $('.' + csub + '-comp').show();
            if (subs.indexOf(csub) < 0)
              subs.push(csub);
          }
          else {
            // $('.' + csub + '-comp').hide();
            var idx = subs.indexOf(csub);
            if (idx >= 0)
              subs.splice(idx, 1);
          }
        // First, hide all
        for (var i = 0; i < all_subs.length; i++) {
            $('.' + all_subs[i] + '-comp').hide();
        }
        // Then, show the one with checked subs within PF/AC
        for (var i = 0; i < type1_subs.length; i++) {
          if (subs.indexOf(type1_subs[i]) >= 0) {
            for (var j = 0; j < type2_subs.length; j++) {
              if (subs.indexOf(type2_subs[j]) >= 0) {
                $('.' + type1_subs[i] + '-comp'+''+'.' + type2_subs[j] + '-comp').show();
              }
              if (subs.indexOf('rewarded') >= 0) {
                $('.unrewarded-comp').hide();
              }
            }
          }
        }
          console.log(subs);

          store.set('/', subs);
          window.history.pushState('', '', '/DataSciComp?sub=' + subs.join());
        });
    });
    
    // Your system time
    var t = null;
    t = setTimeout(showTime,1000);//开始执行
    function showTime()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
       document.getElementById("system-time").innerHTML = 'Your current server time: '+dt;
       t = setTimeout(showTime,1000); //设定定时器，循环执行             
    } 


      // https://blog.csdn.net/dcb_ripple/article/details/54347339
      var Cookie = {  
        setCookie:function(name,value,option){  
            var str = name + "=" + escape(value);  
            if(option){  
                if(option.expireDays){  
                    var date = new Date();  
                    var ms = option.expireDays * 24 * 3600 * 1000;  
                    date.setTime(date.getTime() + ms);  
                    str += "; expires=" + date.toGMTString();  
                }  
                if(option.path)str += ";path=" + option.path;  
                if(option.domain)str += ";domain=" + option.domain;  
                if(option.secure)str += ";true";  
            }  
            document.cookie = str;  
        },  
        getCookie:function(name){  
            var cookies = document.cookie.split(";");  
            for(var i=0; i<cookies.length;i++){  
                var arr=cookies[i].split("=");  
                if(arr[0].trim()==name){  
                    return unescape(arr[1]);  
                }  
            }  
            return "";  
        },  
        delCookie:function(name){  
            this.setCookie(name,"",{expireDays:-1});  
        }  
    }  
    window.onload=function(){  
        if("1"==Cookie.getCookie("diffmaker")){  
            //alert("找到Cookie，我将不再刷新页面，并删除Cookie");  
            Cookie.delCookie("diffmaker");  
        }else{  
            //alert("没有找到Cookie，我将刷新页面!");  
            Cookie.setCookie("diffmaker","1",null);  
            window.location.reload(true);  
        }  
    }  
    </script>
{% endblock %}


<!-- 完整的 JavaScript 参考手册：http://www.w3school.com.cn/jsref/index.asp
- JavaScript 本地对象和内置对象
- Browser 对象（BOM）
- HTML DOM 对象 -->

<!-- HTML DOM Style 对象参考手册：http://www.w3school.com.cn/jsref/dom_obj_style.asp -->

<!-- $() = document.getElementById() -->
